<template>
  <div class="index">
    <Header />
    <div class="main">
      <div>
        <Aside />
        <Nav />
        <Classify />
        <h4>推荐商品</h4>
        <Recommend @get-data-end="addBs" :num="num" @refresh="refresh" />
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/index/Header.vue";
import Nav from "../../components/index/Nav.vue";
import Aside from "../../components/index/Aside.vue";
import Classify from "../../components/index/Classify.vue";
import Recommend from "../../components/index/Recommend.vue";

import BScroll from "better-scroll";
let bs;
export default {
  data() {
    return {
      num: 0,
    };
  },
  components: {
    Header,
    Nav,
    Aside,
    Classify,
    Recommend,
  },
  methods: {
    addBs() {
      bs = new BScroll(".main", {
        scrollX: false,
        scrollY: true,
        click: true,
        // 允许我们做上拉加载
        pullUpLoad: true,
      });
      //  监听pullingUp表示已经拉到底了
      bs.on("pullingUp", () => {
        console.log("已经拉到底了");
        this.num++;
      });
    },
    refresh(finish) {
      // 重新计算高度
      bs.refresh();
      if (!finish) {
        //  已经做好下一次上来加载的准备
        bs.finishPullUp();
      }
    },
  },
};
</script>

<style scoped>
h4 {
  border-left: 5px solid #df3a01;
  text-align: left;
  text-indent: 10px;
}
.index {
  position: relative;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 46px;
}
.main {
  position: fixed;
  left: 0;
  right: 0;
  top: 46px;
  bottom: 50px;
  /* overflow: hidden;  */
  /* overflow: scroll; */
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 48px;
  width: 100%;
}
</style>
